<template>
    <div class="item">
        <el-avatar src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
        <div class="info">
            <div class="name">冬日暖阳</div>
            <div class="brief">这个人很懒, 什么都没有</div>
        </div>
        <el-button :class="isFollow ? 'follow': ''" type="primary" round @click="changeFollow">{{followInfo}}</el-button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            isFollow: true,
            followInfo: '已关注'
        }
    },
    methods:{
        changeFollow(){
            if(this.isFollow === true){
                this.isFollow = false
                this.followInfo = '关注'
                this.$message({
                  showClose: true,
                  message: '取关成功',
                  type: 'warning'
                });
            }else{
                this.isFollow = true
                this.followInfo = '已关注'
                this.$message({
                  showClose: true,
                  message: '关注成功',
                  type: 'success'
                });
            }
        }
    }
}
</script>

<style lang="less" scoped>
.item{
    width: 100%;
    height: 96px;
    padding: 24px 0;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f2;
    display: flex;
    position: relative;
    .el-avatar{
        width: 48px;
        height: 48px;
        margin-right: 15px;
    }
    .info{
        height: 48px;
        .name{
            color: #222226;
            font-size: 16px;
            height: 24px;
        }
        .brief{
            font-size: 14px;
            color: #555666;
        }
    }
    .el-button{
        position: absolute;
        right: 0;
    }

}
.follow{
    background-color: white;
    color: #999AAA;
    border: 1px solid #ccccd8;
}
</style>